﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>COS 文档预览 - 动态参数 (Vue 3.5 CDN)</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: #2c3e50;
            display: flex;
            flex-direction: column;
            touch-action: manipulation;
        }
        #app {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        .controls-area {
            display: flex;
            flex-direction: column;
            padding: 10px;
            background-color: #f0f0f0;
            border-bottom: 1px solid #ccc;
            gap: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            z-index: 10;
        }
        .input-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .url-input {
            flex: 1;
            min-width: 250px;
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            line-height: 1.5;
        }
        .preview-button {
            padding: 8px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            white-space: nowrap;
            transition: background-color 0.2s ease-in-out;
        }
        .preview-button:hover:not(:disabled) {
            background-color: #0056b3;
        }
        .preview-button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        .param-display {
            background-color: #e9ecef;
            padding: 10px 15px;
            border-radius: 4px;
            font-size: 0.9em;
            color: #495057;
            word-break: break-all;
        }
        .param-display p {
            margin: 5px 0;
        }
        .param-display strong {
            color: #343a40;
        }
        .app-viewer {
            flex: 1;
            display: flex;
            overflow: hidden;
            position: relative;
        }
        .sdk-mount-point {
            flex: 1;
            width: 100%;
            height: 100%;
        }
        table.query-table {
            width: 100%;
            background: #fff;
            border-collapse: collapse;
            margin-bottom: 10px;
        }
        table.query-table td {
            border: 1px solid #e0e0e0;
            padding: 4px 8px;
        }
        table.query-table td:first-child {
            font-weight: bold;
            background: #f8f8f8;
            width: 120px;
        }
    </style>
    <script src="https://cdn.bootcss.com/babel-core/5.8.35/browser.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-core/5.8.35/browser-polyfill.min.js"></script>
    <script src="/js/base64.js"></script>
    <script src="/js/sdk-v0.2.1.js"></script>
</head>
<body>
    <div id="app">
        <div class="controls-area">
         
        </div>
        <div class="app-viewer">
            <div class="sdk-mount-point"></div>
        </div>
    </div>
    <script type="text/babel">
function renderQueryParamsTable() {
    const params = new URLSearchParams(window.location.search);
    if ([...params].length === 0) return;
    let table = document.createElement('table');
    table.className = 'query-table';
    for (const [key, value] of params.entries()) {
        let tr = document.createElement('tr');
        let tdKey = document.createElement('td');
        let tdVal = document.createElement('td');
        tdKey.textContent = key;
        tdVal.textContent = decodeURIComponent(value);
        tr.appendChild(tdKey);
        tr.appendChild(tdVal);
        table.appendChild(tr);
    }
    const controls = document.querySelector('.controls-area');
    if (controls) {
        controls.insertBefore(table, controls.firstChild);
    }
}
window.onload = async function () {
    const params = new URLSearchParams(window.location.search);
    const objectUrl = params.get('objectUrl');
    console.log(objectUrl)
    if (!objectUrl) {
        console.error('URL parameter is missing');
        return;
    }
    renderQueryParamsTable();
    var url = await COSDocPreviewSDK.getPreviewUrl({
        // objectUrl：输入cos文件地址
        objectUrl: objectUrl,
        copyable: 0,
        htmlwaterword: Base64.encodeUrl('135****3003'),
        htmlfillstyle: Base64.encodeUrl('#006eff'),
        htmlfillstyle: Base64.encodeUrl('rgba(255,0,0,0.5)'),
        htmlfront: Base64.encodeUrl('bold 10px Serif'),
        htmlrotate: 30,
        htmlhorizontal: 100,
        htmlvertical: 40,
        credentials: {
        }
    })
    const demo = COSDocPreviewSDK.config({
        mount: document.querySelector('.sdk-mount-point'),
        url,
        mode: 'normal',
        commonOptions: {
            isShowHeader: false,
            isShowTopArea: false
        }
    });
    demo.on('fileOpen', (data) => {
        console.log('打开成功');
        test();
    });
    const test = async () => {
        await demo.ready();
        console.log('demo ready');
        testXls();
    }
    const testXls = async () => {
        const app = demo.ExcelApplication()
        const name = await app.ActiveSheet.Name
        console.log('ActiveSheet:', name)
    }
}
    </script>
</body>
</html>
